<div class="panel panel-info component" indigo-collapsible-component>
    <div class="panel-heading" i-translate="PRODUCT_BATCH_DETAILS"></div>
    <div class="panel-body collapsible">
        <div class="form-inline form-batch-details">
            <label><span i-translate="NOTEBOOK_BATCH_N"></span>: <span
                ng-bind="vm.selectedBatch.fullNbkImmutablePart"></span></label>
            <autocomplete model="vm.selectedBatch"
                          items="vm.batches"
                          on-select="vm.selectBatch(vm.selectedBatch)"
                          field="nbkBatch"
                          class="select-inline"
            ></autocomplete>
            <indigo-checkbox
                indigo-model="vm.showSummary"
                indigo-label="Show summary table"
            ></indigo-checkbox>
        </div>
        <indigo-batch-summary ng-if="vm.showSummary"
                              save-experiment-fn="vm.saveExperimentFn()"
                              is-hide-column-settings="true"
                              batches="vm.batches"
                              selected-batch="vm.selectedBatch"
                              selected-batch-trigger="vm.selectedBatchTrigger"
                              is-readonly="vm.isReadonly"
                              on-added-batch="vm.onAddedBatch({batch: batch})"
                              batch-operation="vm.batchOperation"
                              on-select-batch="vm.onSelectBatch({batch: batch})"
                              on-remove-batches="vm.onRemoveBatches({batches: batches})"
        ></indigo-batch-summary>
        <indigo-table ng-if="!vm.showSummary"
                      indigo-id="product-detail-table"
                      indigo-columns="vm.productTableColumns"
                      is-readonly="vm.isReadonly || vm.selectedBatch.registrationStatus"
                      indigo-rows="[vm.selectedBatch]"
                      selected-batch="vm.selectedBatch"
                      selected-batch-trigger="vm.selectedBatchTrigger"
                      on-changed="vm.onChange()"
                      indigo-hide-column-settings="true"
                      on-close-cell="vm.onBatchChanged(data)">

            <div class="action-panel m-b20">
                <div class="action-panel__left">
                    <span class="txt-small bold m-r5"><span i-translate="BATCHES"></span>:</span>
                    <div class="btn-group list-component-buttons">
                        <add-new-batch batch-operation="vm.batchOperation"
                                       on-added-batch="vm.onAddedBatch({batch: batch})"
                                       on-select-batch="vm.onSelectBatch({batch: batch})"
                                       is-readonly="vm.isReadonly">
                        </add-new-batch>
                        <duplicate-batches is-readonly="vm.isReadonly || !vm.selectedBatch"
                                           batches="vm.batches" is-details="true">
                        </duplicate-batches>
                        <delete-batches is-readonly="vm.isEditDisabled"
                                        delete-batch="vm.selectedBatch"
                                        on-remove-batches="vm.onRemoveBatches({batches: batches})">
                        </delete-batches>
                        <sync-with-intended-products is-readonly="vm.isReadonly"></sync-with-intended-products>
                        <button type="button" class="btn btn-info btn-small" disabled i-translate="VNV"></button>
                        <register-batches is-readonly="vm.isReadonly" is-details="true"></register-batches>
                        <indigo-inline-loader promise="vm.batchOperation"></indigo-inline-loader>
                        <simple-radio>
                            <input name="batchDetailsRadio"
                                   ng-disabled="vm.isEditDisabled"
                                   ng-click="vm.selectedBatch.batchType = 'Intermediate'; vm.onChanged()"
                                   ng-checked="vm.selectedBatch.batchType === 'Intermediate'">
                            <label i-translate="INTERMEDIATE"></label>
                        </simple-radio>
                        <simple-radio>
                            <input name="batchDetailsRadio"
                                   ng-disabled="vm.isEditDisabled"
                                   ng-click="vm.selectedBatch.batchType = 'Test Compound'; vm.onChanged()"
                                   ng-checked="vm.selectedBatch.batchType === 'Test Compound'">
                            <label i-translate="TEST_COMPOUND"></label>
                        </simple-radio>
                    </div>
                </div>
                <div class="action-panel__right">
                    <span class="txt-small bold m-r5"> <span i-translate="SD_FILE"></span>:</span>

                    <div class="btn-group">
                        <import-sdf-file is-readonly="vm.isReadonly"></import-sdf-file>
                        <export-sdf-file is-readonly="!vm.selectedBatch"
                                         is-selected-batch="true">
                        </export-sdf-file>
                    </div>
                </div>
            </div>
        </indigo-table>

        <div class="row">
            <div class="col-md-4 col-sm-6">
                <autocomplete label="Status"
                              model="vm.selectedBatch.regStatus"
                              readonly="vm.isEditDisabled">
                </autocomplete>
                <simple-input>
                    <span i-translate="CONVERSATIONAL_BATCH_NUMBER"></span>
                    <input class="form-control" ng-model="vm.selectedBatch.conversationalBatchNumber"
                           disabled
                           ng-attr-title="vm.selectedBatch.conversationalBatchNumber">
                </simple-input>
                <simple-input>
                    <span i-translate="VIRTUAL_COMPOUND_ID"></span>
                    <input class="form-control"
                           ng-model="vm.selectedBatch.virtualCompoundId"
                           ng-disabled="vm.isEditDisabled"
                           ng-attr-title="vm.selectedBatch.virtualCompoundId">
                </simple-input>
                <indigo-select indigo-label="Source"
                               indigo-model="vm.selectedBatch.source"
                               indigo-label-vertical="true"
                               indigo-dictionary="Source"
                               indigo-readonly="vm.isEditDisabled"
                ></indigo-select>
                <indigo-select indigo-label="Source Detail"
                               indigo-model="vm.selectedBatch.sourceDetail"
                               indigo-label-vertical="true"
                               indigo-dictionary="Source Details"
                               indigo-readonly="vm.isEditDisabled"
                ></indigo-select>
                <indigo-select indigo-label="Stereoisomer Code"
                               indigo-dictionary="Stereoisomer Code"
                               indigo-label-vertical="true"
                               indigo-item-prop="name,description"
                               indigo-model="vm.selectedBatch.stereoisomer"
                               indigo-readonly="vm.isEditDisabled"
                ></indigo-select>
                <indigo-simple-text indigo-label="Calculated Batch MW"
                                    indigo-model="vm.selectedBatch.molWeight.value | round"
                                    indigo-empty-text="none"
                ></indigo-simple-text>
                <indigo-simple-text indigo-label="Calculated Batch MF"
                                    indigo-model="vm.selectedBatch.formula.value"
                                    indigo-empty-text="none">
                </indigo-simple-text>
                <autocomplete label="Salt Code & Name"
                              items="vm.saltCodeValues"
                              model="vm.selectedBatch.saltCode"
                              on-select="vm.onBatchChanged({row: vm.selectedBatch, column: 'saltCode'})"
                              readonly="vm.isEditDisabled || !vm.canEditSaltCode(vm.selectedBatch)"
                ></autocomplete>
                <simple-input>
                    <span i-translate="SALT_EQUIVALENT"></span>
                    <input class="form-control"
                           type="number"
                           ng-change="vm.onBatchChanged({row: vm.selectedBatch, column: 'saltEq'})"
                           ng-model="vm.selectedBatch.saltEq.value"
                           ng-disabled="vm.isEditDisabled || !vm.canEditSaltEq(vm.selectedBatch)">
                </simple-input>
                <indigo-text-area indigo-label="Structure comments"
                                  indigo-model="vm.selectedBatch.structureComments"
                                  indigo-readonly="vm.isEditDisabled"
                ></indigo-text-area>
            </div>
            <div class="col-md-4 col-sm-6">
                <indigo-select indigo-label="Compound State"
                               indigo-dictionary="Compound State"
                               indigo-label-vertical="true"
                               indigo-model="vm.selectedBatch.compoundState"
                               indigo-readonly="vm.isEditDisabled"
                ></indigo-select>
                <simple-input>
                    <span i-translate="PRECURSOR_REACTANT_IDS"></span>
                    <input class="form-control"
                           ng-model="vm.selectedBatch.precursors"
                           ng-disabled="vm.isEditDisabled || vm.isExistStoichTable">
                </simple-input>

                <additional-editor-value model="vm.selectedBatch.purity.asString"
                                         on-click="vm.editPurity()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="PURITY"></label>
                </additional-editor-value>

                <additional-editor-value model="vm.selectedBatch.meltingPoint.asString"
                                         on-click="vm.editMeltingPoint()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="MELTING_POINT"></label>
                </additional-editor-value>

                <additional-editor-value model="vm.selectedBatch.residualSolvents.asString"
                                         on-click="vm.editResidualSolvents()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="RESIDUAL_SOLVENTS"></label>
                </additional-editor-value>

                <additional-editor-value model="vm.selectedBatch.solubility.asString"
                                         on-click="vm.editSolubility()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="SOLUBILITY_IN_SOLVENTS"></label>
                </additional-editor-value>


                <additional-editor-value model="vm.selectedBatch.externalSupplier.asString"
                                         on-click="vm.editExternalSupplier()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="EXTERNAL_SUPPLIER"></label>
                </additional-editor-value>

            </div>
            <div class="col-md-4 col-sm-6">
                <indigo-select indigo-label="Compound Protection"
                               indigo-model="vm.selectedBatch.compoundProtection"
                               indigo-dictionary="Compound Protection"
                               indigo-label-vertical="true"
                               indigo-readonly="vm.isEditDisabled"
                ></indigo-select>

                <additional-editor-value model="vm.selectedBatch.healthHazards.asString"
                                         on-click="vm.editHealthHazards()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="HEALTH_HAZARDS"></label>
                </additional-editor-value>

                <additional-editor-value model="vm.selectedBatch.handlingPrecautions.asString"
                                         on-click="vm.editHandlingPrecautions()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="HANDLING_PRECAUTIONS"></label>
                </additional-editor-value>

                <additional-editor-value model="vm.selectedBatch.storageInstructions.asString"
                                         on-click="vm.editStorageInstructions()"
                                         is-disabled="vm.isEditDisabled">
                    <label i-translate="STORAGE_INSTRUCTIONS"></label>
                </additional-editor-value>

                <indigo-text-area indigo-label="Batch Comments"
                                  indigo-model="vm.selectedBatch.comments"
                                  indigo-readonly="vm.isEditDisabled"
                ></indigo-text-area>
            </div>
        </div>
    </div>
</div>
